// 注册路由组件
import React, {Component} from 'react'
import {NavBar, WingBlank, List, InputItem, Radio, WhiteSpace, Button} from 'antd-mobile'
import {connect} from 'react-redux'
import {register} from '../../redux/action'
import {Redirect} from 'react-router-dom'
import Logo from '../../components/logo/logo'
const ListItem = List.Item;

export class Register extends Component{
    state = {
        username: '', // 账号
        password: '', // 密码
        password2:'',
        type:'' // 用户类型
    };
    register = () => {
        // console.log(this.state)
        this.props.register(this.state)
    };
    // 处理输入数据的改变 更新对应的状态
    handleChange = (name, val) =>{
        // 更新状态
        this.setState({
            [name]: val, // 属性名不是name 而是name的值
        })
    };

    toLogin = () => {
        this.props.history.replace('/login')
    };
    render(){
        const {type} = this.state;
        const {msg, redirectTo} = this.props.user;
        // 如果有值 自动重定向到指定路径
        if(redirectTo){
            return  <Redirect to={redirectTo}/>
        }
        return(
            <div>
                <NavBar>R&nbsp;C&nbsp;招&nbsp;聘</NavBar>
                <Logo></Logo>
                <WingBlank>
                    <List>
                        {msg ? <div className={'error-msg'}>{msg}</div> : null}
                        <InputItem onChange={val => {this.handleChange('username', val)}}>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;:</InputItem>
                        <InputItem onChange={val => {this.handleChange('password', val)}}>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;:</InputItem>
                        <InputItem onChange={val => {this.handleChange('password2', val)}}>确认密码&nbsp;:</InputItem>
                        <ListItem>
                            <span>用户类型&nbsp;:</span>
                            &nbsp;&nbsp;&nbsp;<Radio onChange={() => this.handleChange('type', 'qiuzhi')} checked={type === 'qiuzhi'}>求职</Radio>
                            &nbsp;&nbsp;&nbsp;<Radio onChange={() => this.handleChange('type', 'zhaopin')}
                                                     checked={type === 'zhaopin'}>招聘</Radio>
                            <WhiteSpace/>
                            <Button type={'primary'} onClick={this.register}>注&nbsp;&nbsp;&nbsp;&nbsp;册</Button><WhiteSpace/>
                            <Button onClick={this.toLogin}>已有账户</Button>
                        </ListItem>
                    </List>
                </WingBlank>
            </div>
            )
    }
}

export default connect(
    state => ({user: state.user}), {register}
)(Register)
